<template>
<div>
  <!-- 留言内容 -->
  <div>
    <!-- 留言通过props传递 -->
    <slot name="default"></slot>
  </div>

  <!-- 删除按钮，触发父组件的删除事件 -->
  <button @click="deleteMsg">删除留言</button>
</div>
</template>

<script setup>
const props = defineProps({
  message: String,
})

const emits = defineEmits(['deleteMsg'])

const deleteMsg = ()=>{
  emits('deleteMsg')
}

defineExpose({
  deleteMsg
})
</script>

<style scoped>
div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button {
  background-color: #dc3545;
}

button:hover {
  background-color: #c82333;
}
</style>